
<template>
  <!-- 自定义图标 -->
  <template v-if="props?.icon.indexOf('icon-') !== 0">
    <Icon :style="{ color: 'hotpink' }">
      <template #component>
        <span
          class="imgIcon"
          :style="'background-image:url(' + props.icon + ')'"
        ></span>
      </template>
    </Icon>
  </template>
  <!-- 原有图标 -->
  <template v-else>
    <component :is="Icons[propsIcon]" />
  </template>
</template>
  <script setup>
import { computed, defineProps } from "vue";
import Icon, * as Icons from "@ant-design/icons-vue";

const props = defineProps({
  icon: {
    type: String,
    default: "",
  },
});
const propsIcon = computed(() => {
  let reg = new RegExp("icon-", "g");
  return props.icon.replace(reg, "");
});
// 监听
</script>
  <style lang="less" scoped>
.imgIcon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: 100% 100%;
}
</style>